<template>
    <div class="area-select">
        <el-form :model="area" :rules="rules" ref="elArea" :inline="true">
            <el-form-item prop="value.province.id">
                <el-select v-model="area.value.province.id" placeholder="请选择省" @change="changeArea(0, 'province', 1)">
                    <el-option v-for="item in area.list[0]" :key="item.area_id" :label="item.area_name" :value="item.area_id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="value.city.id" v-if='area.list[area.value.province.id] || showOptions && deep >= 2'>
                <el-select v-model="area.value.city.id" placeholder="请选择市" @change="changeArea('province', 'city', 2)">
                    <el-option v-for="item in area.list[area.value.province.id]" :key="item.area_id" :label="item.area_name" :value="item.area_id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="value.county.id" v-if='area.list[area.value.city.id] || showOptions && deep >= 3'>
                <el-select v-model="area.value.county.id" placeholder="请选择区县" @change="changeArea('city', 'county', 3)">
                    <el-option v-for="item in area.list[area.value.city.id]" :key="item.area_id" :label="item.area_name" :value="item.area_id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="value.town_id" v-if='area.list[area.value.county.id] && area.list[area.value.county.id].length > 0 || showOptions && deep >= 4'>
                <el-select v-model="area.value.town.id" placeholder="请选择乡镇、街道" @change="changeArea('county', 'town', 4)">
                    <el-option v-for="item in area.list[area.value.county.id]" :key="item.area_id" :label="item.area_name" :value="item.area_id"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    name: 'AreaSelect',
    props: {
        fid: {
            type: String,
            default: '0'
        },
        def_id: {
            type: String,
            default: '0'
        },
        area_id_arr: {
            type: Array,
            default: () => (['province', 'city', 'county', 'town'])
        },
        deep: { // 显示的深度，默认精确到街道
            type: Number,
            default: 4
        },
        showOptions: { // 是否列出所有选项，默认是只显示省份一级表单，当选择后才会显示下一级表单
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            // 表单验证
            rules: {
                'value.province.id': {
                    required: true,
                    message: "请选择省份",
                    trigger: "change"
                },
                'value.city.id': {
                    required: true,
                    message: "请选择县市",
                    trigger: "change"
                },
                'value.county.id': {
                    required: true,
                    message: "请选择区域",
                    trigger: "change"
                }
            },
            area: {
                list: [],
                value: {
                    province: { // 省
                        id: "",
                        name: "",
                    },
                    city: {     // 县市
                        id: "",
                        name: "",
                    },
                    county: {   // 区域
                        id: "",
                        name: "",
                    },
                    town: {      // 乡镇街道
                        id: "",
                        name: "",
                    }
                }
            },
        }
    },
    methods: {
        // 获取城市分类 fid 选择ID , def_id 初始化ID
        getArea(fid = 0, def_id = 0) {
            this.$http.post('/admin/store/index.php?act=getArea&op=selectArea', {fid, def_id}).
            then(res => {
                if (def_id == 0) {
                    // 增加属性，需要通过$set更新
                    this.$set(this.area.list, fid, res || [])
                } else {
                    res = res ? res.reverse().slice(0, this.area_id_arr.length) : []
                    let area = [], pid = 0;
                    for (let i = 0; i < res.length; i++) {
                        let value = res[i];
                        area[pid] = value.rs;
                        if (value.def_id) {
                            pid = value.def_id;
                            this.area.value[this.area_id_arr[i]].id = value.def_id.toString();
                            const activeItem = value.rs.find(item => item.area_id == value.def_id);
                            if (activeItem) {
                                this.area.value[this.area_id_arr[i]].name = activeItem.area_name;
                            }
                        }
                    }
                    this.area.list = area;
                    this.$emit("change", this.area.value)
                }
            })
        },
        // 地区选择
        changeArea(key = 0, name = 'province', _deep = 0) {
            const index = this.area_id_arr.indexOf(name), length = this.area_id_arr.length
            if (index < length - 1) {
                const _key = key == 0 ? key : this.area.value[key].id, fid = this.area.value[name].id;
                this.area.value[name].name = this.area.list[_key].filter(item => item.area_id == fid)[0].area_name;
                if (!this.area.list[fid] && this.deep > _deep) {
                    this.getArea(fid);
                }
            }
            let clear = false;
            for(let value of this.area_id_arr) {
                if (clear) {
                    this.area.value[value].id = '';
                    this.area.value[value].name = '';
                }
                if (value == name) {
                    clear = true;
                }
            }
            this.$emit("change", this.area.value)
        },
    },
    created() {
        this.getArea(this.fid, this.def_id);
    },
    watch: {
        'def_id'(val, oldVal) {
            this.getArea(this.fid, val);
        }
    }
}
</script>
<style lang="scss" scoped>
.area-select {
    /deep/.el-form-item--mini.el-form-item {
      margin-bottom: 0;
      .el-select, .el-input {
        width: 168px;
      }
    }
}
</style>